<div class="row">
    <div class="col-md-2">
        <a class="file">选择文件<input type="file" ng2FileSelect [uploader]="uploader" multiple  [accept]="accept"/></a>
    </div>
    <div class="col-md-6" *ngIf="uploader.queue.length != 0">
        <button type="button" class="btn btn-success btn-sm" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
            <span class="glyphicon glyphicon-upload"></span>全部上传
        </button>
        <button type="button" class="btn btn-warning btn-sm" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
            <span class="glyphicon glyphicon-ban-circle"></span>全部取消
        </button>
        <button type="button" class="btn btn-danger btn-sm" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
            <span class="glyphicon glyphicon-trash"></span>全部移除
        </button>
    </div>
</div>
<div class="row" *ngIf="uploader.queue.length != 0">
    <table class="table">
        <thead>
            <tr>
                <th width="50%">名称{{uploader.isHTML5}}</th>
                <th>大小</th>
                <th>上传进度</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of uploader.queue">
                <td><strong>{{ item?.file?.name }}</strong></td>
                <td nowrap>{{ item?.file?.size/1024 | number:'.2' }} KB</td>
                <td>
                    <div class="progress" style="margin-bottom: 0;">
                        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                    </div>
                </td>
                <td class="text-center">
                    <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                    <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                    <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                </td>
                <td nowrap>
                    <button type="button" class="btn btn-success btn-xs" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                        <span class="glyphicon glyphicon-upload"></span>上传
                    </button>
                    <button type="button" class="btn btn-warning btn-xs" (click)="item.cancel()" [disabled]="!item.isUploading">
                        <span class="glyphicon glyphicon-ban-circle"></span>取消
                    </button>
                    <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()">
                        <span class="glyphicon glyphicon-trash"></span>移除
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
    <div>
        <div>
            <div class="progress">
                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <ul class="thumbnails gallery pl0">
        <ng-template ngFor let-item let-index="index" [ngForOf]="imageFiles">
            <li class="thumbnail">
                <a><img [src]="item.url" alt=""></a>
                <div class="gallery-controls">
                    <a class="gallery-left" (click)="moveBackFileItem(index)"><i class="glyphicon glyphicon-arrow-left"></i></a>
                    <a class="gallery-right" (click)="moveForwardFileItem(index)"><i class="glyphicon glyphicon-arrow-right"></i></a>
                    <a class="gallery-remove" (click)="removeFileItem(item.fileItem, index)"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </li>
        </ng-template>
    </ul>
</div>